<template>
  <Modal v-model="isOpen" width="80%" :loading="loading" @on-ok="ok" @on-cancel="cancel">
    <p slot="header">
      <Icon type="ios-book-outline"></Icon>&nbsp;<span>详情展示</span></p>
    <div  style="height: 100%;">
      <div class="left">
        <div class="tab-ab">
          <div class="tab-abc">
            <h2>车辆状态：</h2>
            <h5>启动状态：</h5>
            <span>无数据</span><br/>
            <h5>锁定状态：</h5>
            <span>无数据</span><br/>
            <h5>大灯状态：</h5>
            <span>无数据</span><br/>
            <h5>在线状态：</h5>
            <span>无数据</span><br/>
            <h5>左前门状态：</h5>
            <span>无数据</span><br/>
            <h5>后尾箱状态：</h5>
            <span>无数据</span><br/>
            <h5>左后门状态：</h5>
            <span>无数据</span><br/>
            <h5>右前门状态：</h5>
            <span>无数据</span><br/>
            <h5>右后门状态：</h5>
            <span>无数据</span><br/>
            <h5>左后窗状态：</h5>
            <span>无数据</span><br/>
            <h5>左前窗状态：</h5>
            <span>无数据</span><br/>
            <h5>右前窗状态：</h5>
            <span>无数据</span><br/>
            <h5>右后窗状态：</h5>
            <span>无数据</span><br/>
            <h5>电压：</h5>
            <span>无数据</span><br/>
            <h5>车速：</h5>
            <span>无数据</span><br/>
            <h5>定位时间：</h5>
            <span>无数据</span><br/>
            <h5>里程数：</h5>
            <span>无数据</span><br/>
            <h5>剩余油量：</h5>
            <span>无数据</span><br/>
            <h5>GPS状态：</h5>
            <span>无数据</span><br/>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style>
  .map {
    width: 90%;
    height: 300px;
    margin-left:100px;
  }
</style>
<script>
  import kulala from '@/models/car/query/index'

  export default {
    props: ['params'],
    data () {
      return {
        isOpen: true,
        loading: false,
        start: {
          on: '启动中',
          off: '未启动'
        },
        lock: {
          on: '已锁定',
          off: '未锁定'
        },
        onLine: {
          on: '在线',
          off: '离线'
        },
        msg: {
          isStart: '',
          isLock: '',
          isOnline: '',
          lightOpen: '',
          leftFrontOpen: '',
          rightFrontOpen: '',
          leftBehindOpen: '',
          rightBehindOpen: '',
          afterBehindOpen: '',
          leftFrontWindowOpen: '',
          rightFrontWindowOpen: '',
          leftBehindWindowOpen: '',
          rightBehindWindowOpen: '',
          gps: '',
          gpsTime: '',
          speed: '',
          voltage: '',
          isGpsOpen: '',
          miles: '',
          remainOil: ''
        },
        icon: {
          url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
          size: {width: 52, height: 26},
          opts: {anchor: {width: 27, height:13}}
        },
        speed: 300
      }
    },
    mounted () {
      this.load()
    },
    methods: {
      load () {
        kulala.show(this.params.id).then(r => {
          if (r.code === 200) {
            this.msg = r.list
          } else {
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      },
      renderText (status, key) {
        if (status === 1) {
          this.msg[key] = '已开启'
        } else {
          this.msg[key] = '未开启'
        }
        return this.msg[key]
      },
      ok () {
        this.$emit('on-ok', {
          refresh: true
        })
        this.isOpen = !this.isOpen
      },
      handler ({BMap, map}) {
      },
      ready () {
        this.change()
      },
      reset () {
        this.play = false
      },
      handleSearchComplete (res) {
        this.path = res.getPlan(0).getRoute(0).getPath()
      }
    }
  }
</script>
<style>

  #left .left {float:left;margin-top:-50px;margin-left:50px;}
  #left .left .tab-ab {width: 100%;}
  #left .left .tab-ab .tab-abc h5 {line-height: 0px;display: inline-block;}
  #left .left .tab-ab .tab-abc span {line-height: 30px;}

  #right .right {margin-top:50px;margin-left:50px;}
  #right .right .bg-div {width: 80%; margin: 0 auto;}
  #right .right .bg-div .map_border{ width:100%; height:100%;padding:30px 20px; border:1px solid #ccc;margin-bottom: 80px;position:relative;}
  #right .right .bg-div .map_border .map{ width:100%; height:100%; margin:0 auto; }


  #footer .footer {margin-top:100px;margin-left:50px;}
  #footer .footer button {width:50px;height:50px;border-radius:25px;outline:none;border:0px;background-color:transparent;}
  #footer .footer div {widih:100px;float:left;text-align:center;margin-right:160px;}
  #footer .footer .btn button {width:80px;height:80px;border-radius:40px;outline:none}
</style>
